<template>
	<view>
		<view class="cu-card case">
			<view class="cu-item shadow bg-white">
				<view class="index-list">
					<!-- 头像、用户名、关注栏开始 -->
					<view class="index-list1">
						<view>
							<!-- 头像开始 -->
							<view class="cu-avatar round lg" v-if="itemList.user.avatarurl" :style="{ backgroundImage: 'url(' + itemList.user.avatarurl + ')' }"></view>
							<!--  头像结束-->
							<!--用户名、时间戳开始  -->

							<view class="content flex-sub">
								<view>{{ itemList.user.nickname }}</view>
								<view class="text-gray text-sm flex justify-between">{{ itemList.cnTime }}</view>
							</view>
						</view>
						<!-- 用户名、时间戳结束 -->
						<!-- 关注栏开始 -->
						<view v-if="Fav">
						  <uniFav
						    :checked="itemList.isfollow"
						    :content-text="contentText"
						    class="favBtn"
						    @click="handFollow()"
						  />
						</view>
						<!-- 关注栏结束 -->
					</view>
					<!-- 头像、用户名、关注栏结束 -->
					<!-- 标题、内容开始 -->
					<view class="index-list2">{{ itemList.title }}</view>
					<view class="index-list3" @tap="ViewImage(itemList.imgUrl)"><image v-if="itemList.imgUrl" :src="itemList.imgUrl" mode="widthFix" lazy-load></image></view>
					<!-- 标题、内容结束 -->
          <!-- 点赞、评论、分享开始 -->

          <view class="text-gray text-sm bar-flex">
            <!-- 点赞开始 -->
            <view>
              <button
                class="cu-btn cuIcon"
                :class="itemList.islike? 'bg-blue' : ''"
                @tap="handLike()"
              >
                <text
                  :class="itemList.islike? 'cuIcon-appreciate' : 'cuIcon-appreciatefill'"
                  class="margin-lr-xs"
                  style="font-size: 30upx;"
                ></text>
              </button>
              <text style="margin-left: 10upx;margin-right: 10upx;">{{ itemList.like}}</text>
            </view>
            <!-- 点赞结束 -->
            <!-- 评论开始 -->
            <view>
              <button class="cu-btn cuIcon">
                <text
                  class="cuIcon-messagefill margin-lr-xs"
                  style="font-size: 30upx;"
                  @tap="clickComment(itemList.id)"
                ></text>
              </button>
              <!-- <text style="margin-left: 10upx;margin-right: 10upx;">{{ itemList.commentsCount }}</text> -->
            </view>

            <!-- 点评论结束 -->
            <!-- 分享开始 -->
            <view>
              <button class="cu-btn cuIcon" open-type="share">
                <text
                  class="cuIcon-forwardfill margin-lr-xs"
                  style="font-size: 30upx;"
                  data-target="ChooseModal"
                ></text>
              </button>
              <!--<text style="margin-left: 10upx;">{{ item.shareNum }}</text>-->
            </view>

            <!-- 分享结束 -->
          </view>

          <!-- 点赞、评论、分享结束 -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniFav from "./uniFav.vue";
export default {
	components: {
	  uniFav
	},
	props: {
	  item: Object,
	  index: Number,
	  Fav:Boolean //关注按钮
	},
	data(){
		return{
			itemList:{},
			contentText: {
			  contentDefault: "关注",
			  contentFav: "已关注"
			},
		};
	},
	watch:{
		item(newValue,oldValue){
			//console.log(this.item)
			this.itemList=this.item;//查询日历打卡使用这条，查询打卡不生效
		}
	},
	created() {
		//console.log(this.item)
		this.itemList=this.item;//查询所有打卡使用这条，查询日历打卡数据为空
	},
	methods: {
		ViewImage(imgUrl) {
			//console.log("预览图片")
			uni.previewImage({
				urls: [imgUrl],
				//current: e.currentTarget.dataset.url
			});
		},
		clickComment(id) {
			uni.navigateTo({
			  url: '/pagesA/comment/index?PId='+id
			});
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '分享我的打卡',
				path: ''
			};
		},
		handFollow() {
		  this.item.isfollow = !this.item.isfollow;
		  this.$forceUpdate();
		  var status;
		  if (this.item.isfollow == true) {
		    //未关注=>关注了
		    status = 1;
		  } else {
		    //关注=>未关注
		    status = 2;
		  }
		  this.request({
		    url: this.apiServer + "/follow/doTaskFollow",
		    method: "POST",
		    header: {
		      "Content-Type": "application/x-www-form-urlencoded"
		    },
		    data: {
		      pId: this.item.id,
		      uId: uni.getStorageSync("user").id,
		      status: status
		    }
		  }).then(res => {
		    console.log(res);
		  });
		},
		handLike() {
		  if (this.item.islike == false) {
		    this.item.like++;
			//console.log(this.item.like)
		  } else {
		    this.item.like--;
		  }
		  this.item.islike = !this.item.islike;
		  //判断
		  var status;
		  if (this.item.islike == true) {
		    //未点赞=>点赞
		    status = 1;
		  } else {
		    //点赞=>未点赞
		    status = 2;
		  }
		  this.request({
		    url: this.apiServer + "/like/doTaskLike",
		    method: "POST",
		    header: {
		      "Content-Type": "application/x-www-form-urlencoded"
		    },
		    data: {
		      pId: this.item.id,
		      uId: uni.getStorageSync("user").id,
		      status: status
		    }
		  }).then(res => {
		    console.log(res);
		  });
		}
	}
};
</script>

<style>
.index-list {
	border-bottom: 1upx solid #ffffff;
	padding: 20upx;
	background-color: #ffffff;
}
.index-list1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.index-list1 > view:first-child {
	display: flex;
	align-items: center;
}
.index-list1 > view:first-child image {
	width: 100upx;
	height: 100upx;
	border-radius: 40upx;
	margin-right: 10upx;
}
.index-list1 > view:first-child view {
	margin-left: 10upx;
	color: #999999;
}
.index-list1 > view:last-child {
}
.index-list2 {
	padding: 15upx;
	font-size: 32upx;
}
.index-list3 {
}
.index-list3 > image {
	width: 100%;
	border-radius: 20upx;
}
.index-list4 {
	color: #999999;
}
.index-list4 {
	padding: 20upx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.index-list4 > view {
	display: flex;

	align-items: center;
}
.index-list4 > view > view:first-child {
	font-size: 40upx;
}
.active {
	color: #ffaa7f;
}
.bar-flex {
	padding: 20upx 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>
